<template>
  <div class="transactions">
    <div class="header-mine-search">
      <div class="header-mine-search__line">
        <div class="header-mine-search__list">
          <div class="search__list-label">{{t('Transaction.Time')}}：</div>
          <div class="search__list-wrapper">
            <el-date-picker
              v-model="form.date"
              type="daterange"
              unlink-panels
              range-separator="-"
              :start-placeholder="t('lang.el.datepicker.startDate')"
              :end-placeholder="t('lang.el.datepicker.endDate')"
              :shortcuts="shortcuts"
              value-format="YYYY-MM-DD"
            />
          </div>
        </div>
        <div class="header-mine-search__list">
          <el-button type="primary" class="header-mine-search__btns" @click="lotteryRecordList" :loading="btnLoading">{{t('BetRecord.Search')}}</el-button>
        </div>
      </div>
    </div>
    <div class="dialog-content">
      <div class="dialog-content-box">
        <div class="dialog-content-wrapper">
          <el-table :data="accessRecord" height="100%" class="record-table" :empty-text="t('BetRecord.Nocontent')">
            <el-table-column align="center" prop="lotteryTime" :label="t('lotteryRecord.test1')">
              <template #default="{row}">
                {{ parseTime(row.lotteryTime) }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="itemType" :label="t('lotteryRecord.test2')">
              <template #default="{row}">
                {{ t(getEnumValue('lotteryRecordType', `${row.itemType}`)) }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="orderId" :label="t('lotteryRecord.test3')">
              <template #default="{row}">
                <p class="gift" v-if="row.itemType == 2">
                  <img :src="getWalletIcon(row.giftType)" alt="">
                  <span>{{ Number(row.giftContent).toFixed(2) }}</span>
                </p>
                <span v-if="row.itemType == 4">{{ $t("lotteryRecord.text38") }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="status" :label="t('lotteryRecord.test4')">
              <template #default="{row}">
                {{ t(getEnumValue('lotteryRecordStatus', `${row.status}`)) }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="awardTime" :label="t('lotteryRecord.test5')">
              <template #default="{row}">
                {{ parseTime(row.awardTime) }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="record-pagination">
      <ZPagination
        v-model:pagination="pagination"
        :query="lotteryRecordList"
      />
    </div>
  </div>
</template>

<script setup lang="ts" name="LotteryRecordPc">
import userinfo from '@/store/userinfo';
import lotteryApi from '@/api/modules/lottery';
import { parseTime } from '@/utils/format';
import { getEnumValue, getEnumOptions } from '@/utils/enums';
import nocache from '@/store/nocache';

const piniaUserinfo:any = userinfo();
const piniaNocache:any = nocache();

const { t } = useI18n();
const data:any = reactive({
  form: {
    type: "1",
    date: [
    ],
    status: '',
    currencyId: piniaUserinfo.getCurrentWallet.currencyId
  },
  options: [],
  accessRecord: [], // 资金记录
  pagination: {
    total: 0,
    pageSize: 10,
    pageNum: 1
  },
  btnLoading: false,
});

const {
  form,
  options,
  accessRecord,
  pagination,
  btnLoading,
} = toRefs(data);

const shortcuts = [
  {
    text: t('lang.el.datepicker.lastweek'),
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: t('lang.el.datepicker.prevMonth'),
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: t('lang.el.datepicker.prevMonth3'),
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]

const getWalletIcon = (id: string) => {
  const wallet = piniaUserinfo.getWallet.find((im:any) => im.currencyId == id);
  return wallet.currencyIcon;
}

const lotteryRecordList = () => {
  btnLoading.value = true;
  lotteryApi.lotteryRecordList({
    activityId: piniaNocache.getActivity.activityId,
    pageNum: pagination.value.pageNum,
    pageSize: pagination.value.pageSize,
    startTime: form.value.date[0] ? form.value.date[0] + ' 00:00:00' : '',
    endTime: form.value.date[1] ? form.value.date[1] + ' 23:59:59' : '',
  }).then((response:any)=>{
    console.log("中奖记录", response)
    if(response.code === 200){
      accessRecord.value = response.rows;
      pagination.value.total = response.total;
    }
  }).finally(()=>{
    btnLoading.value = false;
  });
}
lotteryRecordList();
</script>

<style lang="scss" scoped>
@import url('./index.scss');
.gift{
  display: flex;
  align-items: center;
  justify-content: center;
  img{
    width: var(--rem-20);
    margin-right: var(--rem-5);
  }
}
</style>
